<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<style>
.border-lavener{
		border: 1px solid #e6e6fa;
	}
	
.titleSection{
		position: relative;
		min-height: 30px;
		border: 1px solid #e6e6fa;
		padding-bottom: 5px;
		padding-top: 5px;
		padding-left: 20px;
		padding-right: 20px;
		margin-top: 5px;
		margin-bottom: 5px;
		background-color: #f5f5f5;
	}
	
	.playlistContainer:before, .playlistContainer:after,
	.titleSection:before, .titleSection:after{
		content: " ";
		display: table;
	}
	:before, :after{
		box-sizing: border-box;
	}
	.musicContainer:after, .titleSection:after{
		clear: both;
	}
	
</style>

<script type="text/javascript">
	// 현재 재생 음악 index
	var nowIndex = 1;
	
	$(function(){
		// 처음 재생음악 설정
		$("source").attr("src", "${initParam.audioPath}"+$("tr[list-no]:first-child").attr("music-src"));
		$("#playingTitle").text($("tr[list-no]:first-child").attr("music-title"));
		$("tr[list-no]:first-child td button[name=playBtn]").text("■");
		$("tr[list-no]:first-child td button[name=playBtn]").attr("name", "stopBtn");
		
		$(":input[name=deleteBtn]").click(function(){
			var $musicListComp = $(this).parent().parent();
 			
			if(confirm($musicListComp.attr("music-title")+" 음악을 삭제하시겠습니까?")){
				$.ajax({
					type:"post",
					url:"playlist_removeMusicList.ju",
					data:"musicListNo="+$musicListComp.attr("musiclist-no"),
					dataType:"json",
					beforeSend:function(){
						playNext();
					},
					success:function(){
						$musicListComp.empty(); 
					}
				});
			}
			
		});//deleteBtn click
		
		$(":input[name=prevBtn]").click(function(){
			playPrev();
		});//prevBtn click
		
		$(":input[name=nextBtn]").click(function(){
			playNext();
		});//nextBtn click
		
		$("#playlist_section").on("click", ":input[name=playBtn]", function(){
			nowIndex = $(this).parents("tr").attr("list-no"); 
			playIndex(nowIndex);
		});//playBtn click
		
		$("#playlist_section").on("click", ":input[name=stopBtn]", function(){
			$(this).text("▶");
			$(this).attr("name", "playBtn");
			
			var player = document.getElementById("player");
			player.pause(); 
			player.currentTime = 0;
		});//stopBtn click
	});
	
	// 해당 인덱스 재생
	function playIndex(index){
		$(":input[name=stopBtn]").text("▶");
		$(":input[name=stopBtn]").attr("name", "playBtn");
		$("tr[list-no="+index+"] td button[name=playBtn]").text("■");
		$("tr[list-no="+index+"] td button[name=playBtn]").attr("name", "stopBtn");
		
		$("#playingTitle").text($("tr[list-no="+index+"]").attr("music-title"));
		var player = document.getElementById("player");
		player.src = "${initParam.audioPath}"+$("tr[list-no="+index+"]").attr("music-src");
		player.play(); 
	}
	
	// 다음곡
	function playNext(){
		
		nowIndex = $("tr[list-no="+nowIndex+"]").next().attr("list-no");
		if(!nowIndex) nowIndex = $("tr[list-no]:first-child").attr("list-no"); 
		
		playIndex(nowIndex);
	}
	
	// 이전곡
	function playPrev(){
		nowIndex = $("tr[list-no="+nowIndex+"]").prev().attr("list-no");
		if(!nowIndex) nowIndex = $("tr[list-no]:last-child").attr("list-no"); 
		
		playIndex(nowIndex);
	}
	
	// pause
	function pauseAudio(){
		$("tr[list-no="+nowIndex+"] td button[name=stopBtn]").text("▶");
		$("tr[list-no="+nowIndex+"] td button[name=stopBtn]").attr("name", "playBtn");
	}
	
	// play
	function playAudio(){
		$("tr[list-no="+nowIndex+"] td button[name=playBtn]").text("■");
		$("tr[list-no="+nowIndex+"] td button[name=playBtn]").attr("name", "stopBtn");
	}
</script>

<div class="playlistContainer">
	<div>
		<div class="titleSection" style="margin: 0">현재 재생중인 곡</div>
		<div class="border-lavener" style="padding: 10px">
			<div id="playingTitle" style="text-align: center; font-size: 28px; font-weight: bold;"> </div>
			<div style="text-align: center;">
				<button type="button" name="prevBtn" class="btn btn-default btn-sm" style="border-radius: 5px;">◀◀</button>
				<audio id="player" onended="playNext()" onpause="pauseAudio()" onplay="playAudio()" controls autoplay="autoplay" 
					style='width: 80%; vertical-align: bottom;'>
					<source src='' type='audio/mpeg'></source>
				</audio>
				<button type="button" name="nextBtn" class="btn btn-default btn-sm" style="border-radius: 5px;">▶▶</button>
			</div>
		</div> 
	</div>
	<div class="titleSection">
		<strong>"${param.playListName }" 플레이리스트</strong>
	</div>
	<table class="table table-striped table-hover">
		<thead>
			<tr>
				<th width="100px">재생</th>
				<th>제목</th>
				<th align="right" width="100px">삭제</th>
			</tr>
		</thead>
		<tbody id="playlist_section">
		<c:forEach items="${list }" var="data" varStatus="index" >
			<tr list-no="${index.count }" musiclist-no="${data.MUSICLIST_NO }" music-src="${data.MUSICBOARD_MUSIC_NEWFILE }"
				music-title="${data.MUSICBOARD_TITLE }" class="border-lavener">
				<td><button type="button" name="playBtn" class="btn btn-success " style="width: 64px">▶</button></td>
				<td>
					<div><a href="musicboard_updateHit.ju?boardNo=${data.MUSICBOARD_NO }" style="text-decoration: none; font-size: 16px"><span></span>${data.MUSICBOARD_TITLE }</a></div>
				</td>
				<td><button type="button" name="deleteBtn" class="btn btn-danger">삭제</button></td>
			</tr>
		</c:forEach>
		</tbody>
	</table>
</div>